import React from 'react';
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';

const option = {
  title: {
    text: '最近14天用户访问量',
    left: 'auto',
    show: true,
    textAlign: 'auto',
    textStyle: {
      fontSize: 16,
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      lineStyle: {
        color: '#096dd9',
      },
    },
    backgroundColor: 'rgba(255,255,255,1)',
    padding: [4, 8],
    textStyle: {
      color: '#096dd9',
    },
    extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)',
  },
  legend: {
    right: 20,
    orient: 'vertical',
  },
  xAxis: {
    type: 'category',
    data: [
      '08-01',
      '08-02',
      '08-03',
      '08-04',
      '08-05',
      '08-06',
      '08-07',
      '08-08',
      '08-09',
      '08-10',
      '08-11',
      '08-12',
      '08-13',
      '08-14',
    ],
    boundaryGap: false,
    splitLine: {
      show: false,
      interval: 'auto',
      lineStyle: {
        color: ['#D4DFF5'],
      },
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: '#096dd9',
      },
    },
    axisLabel: {
      margin: 10,
      textStyle: {
        fontSize: 10,
      },
    },
    nameTextStyle: {
      color: '#999',
      fontStyle: 14,
    },
  },
  yAxis: {
    type: 'value',
    splitLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    nameTextStyle: {
      color: '#999',
      fontStyle: 12,
    },
    axisLabel: {
      margin: 0,
      textStyle: {
        fontSize: 8,
      },
    },
  },
  series: [
    {
      name: '昨日',
      type: 'line',
      smooth: true,
      showSymbol: false,
      symbol: 'circle',
      symbolSize: 6,
      data: [
        '520',
        '413',
        '508',
        '711',
        '626',
        '488',
        '600',
        '346',
        '480',
        '608',
        '411',
        '626',
        '488',
        '8',
      ],
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: '#096dd9',
              },
              {
                offset: 1,
                color: '#e6f7ff',
              },
            ],
            false
          ),
        },
      },
      itemStyle: {
        normal: {
          color: '#096dd9',
        },
      },
      lineStyle: {
        width: 2,
        type: 'solid',
      },
    },
  ],
};

const EchartsViews = () => (
  <ReactEcharts option={option} style={{ height: '400px', width: '100%' }} />
);

export default EchartsViews;
